@extends('layouts.app')
@section('title', '首页-商品列表')

@section('content')


<div id="app" >
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-menu-item index="1" >
	<el-tooltip placement="right-start">
	<div slot="content" style="font-size:20px">联系微信客服<br><img src='src/assets/hgs_big_weixin.jpg'></div>
    <el-button>
	    <i class="el-icon-user-solid"></i>
		联系客服
	</el-button>
</el-tooltip>
  </el-menu-item>
  <el-menu-item index="2">
	<el-tooltip placement="right-start">
	<div slot="content">
		<p style="font-size:18px">欢迎来电交流</p>
		<p style="font-size:20px">156-8888-8888</p>
	</div>
    <el-button>
	    <i class="el-icon-phone-outline"></i>
		联系电话
	</el-button>
    </el-tooltip>
  </el-menu-item>
  <el-menu-item index="3">
<el-tooltip placement="right-start">
	<div slot="content">
		<a style="font-size:15px;" href="">新手指南</a><br><br>
		<a style="font-size:15px;" href="">付款方式</a><br><br>
		<a style="font-size:15px;" href="">配送服务</a><br><br>
		<a style="font-size:15px;" href="">售后服务</a>
	</div>
    <el-button>
	    <i class="el-icon-question"></i>
		帮助中心
	</el-button>
</el-tooltip>
  </el-menu-item>
</el-menu>
 </div>



<div class="carousel" id="parent" style="width:1220px; height: 380px;margin-left:-55px ">
      <ul class="carousel-imgs" id="img">
        <li>
          <a href="#"><img src="/src/assets/lb1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="/src/assets/lb2.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="/src/assets/lb3.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="/src/assets/lb4.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="/src/assets/lb5.jpg" alt="" /></a>
        </li>
      </ul>
      <div class="carousel-btns">
        <button type="button" class="carousel-btn-left">&lt;</button>
        <button type="button" class="carousel-btn-right">&gt;</button>
      </div>
    </div>


<div class="row">
    <div class="col-lg-10 offset-lg-1">
        <div class="card">
            <div class="card-body">
                <!-- 筛选组件开始 -->
                <form action="{{ route('products.index') }}" class="search-form">
                    <div class="form-row">
                        <div class="col-md-9">
                            <div class="form-row">
                                <div class="col-auto"><input type="text" class="form-control form-control-sm" name="search" placeholder="search"></div>
                                <div class="col-auto"><button class="btn btn-primary btn-sm">搜索</button></div>
                            </div>
                        </div>
                        <div class="col-md-3">

                            <select name="order" class="form-control form-control-sm float-right">
                                <option value="">排序方式</option>
                                <option value="price_asc">价格从低到高</option>
                                <option value="price_desc">价格从高到低</option>
                                <option value="sold_count_desc">销量从高到低</option>
                                <option value="sold_count_asc">销量从低到高</option>
                                <option value="rating_desc">评价从高到低</option>
                                <option value="rating_asc">评价从低到高</option>
                            </select>
                        </div>
                    </div>
                </form>
                <!-- 筛选组件结束 -->
                <div class="row products-list">

                    @foreach($products as $product)
                        <div class="col-3 product-item">
                            <div class="product-content">
                                <div class="top">
                                    <div class="img">
                                        <a href="{{ route('products.show', ['product' => $product->id]) }}">
                                            <img src="{{ $product->image_url }}" alt="">
                                        </a>
                                    </div>
                                    <div class="price"><b>￥</b>{{ $product->price }}</div>
                                    <div class="title">
                                        <a href="{{ route('products.show', ['product' => $product->id]) }}">{{ $product->title }}</a>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="sold_count">销量 <span>{{ $product->sold_count }}笔</span></div>
                                    <div class="review_count">评价 <span>{{ $product->review_count }}</span></div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
                <div class="float-right">{{ $products->appends($filters)->render() }}</div>
            </div>
        </div>
    </div>
</div>




<div id="two" class="two"><img src="/src/assets/tuijian.jpg"  alt=""></div>
@endsection

@section('scriptsAfterJs')
<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
	  }
    })
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


<script>
    var filters = {!! json_encode($filters) !!};
    $(document).ready(function () {
        $('.search-form input[name=search]').val(filters.search);
        $('.search-form select[name=order]').val(filters.order);
        $('.search-form select[name=order]').on('change', function() {
            $('.search-form').submit();
        });
    })
</script>


<script type="text/javascript">


 window.onload = function(){//侧边悬浮框控制

            var two = document.getElementById('two');
            document.onscroll = function(){
                var temp = $(window).scrollTop();//用于获取滚动条距离页面头部的距离

                //如果页面向下滚动大于或等于200px则执行ani1动画,否则执行ani2动画
                if(temp>600){
                    two.style['animation-name']='ani1';

                }else{

                    two.style['animation-name']='ani2';
                }




            }
        }


      function carousel(left, top) {
        /* 获取元素对象 */
        var $num=0;
        var t1;
        var t2;
        // var carousel = document.getElementById("carousel");
        var $carousel = $(".carousel");
        var $imgs = $(".carousel-imgs li"); //圖片
        var $btnL = $(".carousel-btn-left");//左按鈕
        var $btnR = $(".carousel-btn-right");//右按鈕
        /* 创建导航按钮 */
        var $item_group = $("<ul></ul>");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
          $item_group.append("<li></li>");
        });
        $carousel.append($item_group);
        /* 样式初始化 */
        $item_group.css({
          "padding": "0px",
          "margin": "0px",
          "list-style": "none",
          "width": "100px",
          "z-index": "50",
          "position": "absolute",
          "left": left,
          "top": "90%"
        });
        $item_group.children().css({
          "width": "10px",
          "height": "10px",
          "padding": "0px",
          "margin": "5px",
          "background": "white",
          "opacity": "0.6",
          "border-radius": "5px",
          "box-shadow": "0 0 5px black",
          "cursor": "pointer",
          "float": "left"
        });
        /* 初始展示位置 */
        var index = 0;
        var $items = $(".carousel-items li");
        $items.eq(index).css("background", "gray");
        $imgs.eq(index).css("opacity", "1");
        $imgs.eq(index).css("z-index", "20");
        /* 按钮点击动作 */
        $btnL.click(function() {
          imgAnimator(false);
        });

        $btnR.click(function() {
          imgAnimator(true);
        });

        $items.click(function() {
          imgAnimator(true, $items.index($(this)));
        });


        var parent = document.getElementById("parent");
        var img = document.getElementById("img");
        var timer = null;

        img.timer=setInterval(function(){imgAnimator(true);}, 2000);


        parent.onmouseout = function()
        {

        img.timer=setInterval(function(){imgAnimator(true);}, 2000);
        }
        parent.onmouseover = function(){
            clearInterval(img.timer);
            }


        /* 图像动画 */
        function imgAnimator(toNext, select) {
          if(select != null) {
            index = select;
          } else if(toNext == true) {
            index = ($imgs.length + index + 1) % $imgs.length;
          } else if(toNext == false) {
            index = ($imgs.length + index - 1) % $imgs.length;
          }

          $items.css("background", "white");
          $items.eq(index).css("background"
          , "grey");

          $imgs.eq(index).css("z-index", 20);
          $imgs.eq(index).animate({
            "opacity": "1"
          }, "slow", function() {
            $imgs.css("z-index", "0");
            $imgs.css("opacity", "0");
            $imgs.eq(index).css("z-index", 10);
            $imgs.eq(index).css("opacity", "1");
          });
        }
      }


    </script>

     <script>
     /* 启用轮播图效果 */
      carousel("43%", "71%");
    </script>

<style>
.carousel {
  width: 800px;
  height: 378px;
  padding: 0px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;

}

.carousel-imgs {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style: none;
  background: black;
  border-radius: 8px;
}

.carousel-imgs li {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  opacity: 0;
  border-radius: 8px;
}

.carousel-imgs a {
  text-decoration: none;
}

.carousel-imgs img {
  width: 100%;
  height: 100%;
}

.carousel-btns {
  width: 100%;
  z-index: 50;
  position: absolute;
  top: 45%;
}

.carousel-btns button {
  border: 0px;
  outline: none;
  padding: 5px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  color: white;
  font-size: 34px;
  font-family: "microsoft yahei";
}

.carousel-btns button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.carousel-btn-left {
  float: left;
}

.carousel-btn-right {
  float: right;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    border: 1px solid #e2f0fb;
    position:fixed;
    left:0;
    top:30%
  }


#two{

               width: 250px;
               height: 300px;
               position: fixed;
               right: 30px;
               top: 30px;
               margin-top: 100px;
               background-color: cyan;
               animation-duration: 2s;
               animation-fill-mode: forwards;
               opacity: 0;
               z-index:50;

           }


           @keyframes ani1{
               0%{
                   opacity: 0;
                   transform:rotateX(-90deg);
               }

               50%{transform:rotateX(25deg);}

               100%{
                    opacity: 1;
                   transform:rotateX(0deg);
                   }
           }
           @keyframes ani2{
               0%{
                   opacity: 1;
                   transform:rotateX(-20deg);
               }
               100%{
                    opacity: 0;
                   transform: skewX(0deg);
                   }
           }
</style>


@endsection

<style>


 .card{
        box-shadow: 0px 20px 40px 0px rgba(143, 138, 137, 0.988);
        background:rgba(250, 244, 244, 0.95);
        width: 1200px;
        margin-left: -140px;

    }
    .form-row button{
  border: none;
  background-color:rgba(23, 161, 5, 0.666);
  border-radius: 6px;
  padding: 0 21px;
  color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
  font-weight: 200;
  width: 100px;
  height: 30px;
    }

 .justify-content-center{
    margin-top:130px;
    margin-bottom:130px;

}
.form-row button:hover{
    background-color:rgba(23, 161, 5, 0.966);
}


</style>


